/**
 * 为创建的 DOM 对象添加属性
 * @param {*} newElement 创建后的 DOM 对象
 * @param {*} virtualDOM virtual DOM 对象
 */
export default function updateNodeElement(newElement, virtualDOM, oldVirtualDOM = {}) {
  // 获取节点对应的属性对象
  const newProps = virtualDOM.props || {}
  const oldProps = oldVirtualDOM.props || {}
  // 循环 props 数组
  Object.keys(newProps).forEach(propName => {
    const newPropsValue = newProps[propName]
    const oldPropsValue = oldProps[propName]
    // 判断新属性和旧属性是否相等
    if (newPropsValue !== oldPropsValue) {
      // 判断属性是否为事件
      if (propName.slice(0, 2) === 'on') {
        // 截取事件名称
        const eventName = propName.toLowerCase().slice(2)
        // 为元素添加事件
        newElement.addEventListener(eventName, newPropsValue)
        if (oldPropsValue) {
          // 删除元素原有事件的处理函数
          newElement.removeEventListener(eventName, oldPropsValue)
        }
      } else if (propName === 'value' || propName === 'checked') {
        // 判断属性是否为 value / checked
        newElement[propName] = newPropsValue
      } else if (propName !== 'children') {
        // 判断属性是否为 children
        // 判断属性是否为类名
        if (propName === 'className') {
          newElement.setAttribute('class', newPropsValue)
        } else {
          newElement.setAttribute(propName, newPropsValue)
        }
      }
    }
  })

  // 循环旧节点判断属性被删除的情况
  Object.keys(oldProps).forEach(propName => {
    const newPropsValue = newProps[propName]
    const oldPropsValue = oldProps[propName]
    if (!newPropsValue) {
      // 如果 newPropsValue 没有就表示属性被删除了
      if (propName.slice(0, 2) === 'on') {
        const eventName = propName.toLowerCase().slice(2)
        newElement.removeEventListener(eventName, oldPropsValue)
      } else if (propName !== 'children') {
        newElement.removeEventListener(propName)
      }
    }
  })
}